<template>
  <div class="permission" v-loading="loading">
    <el-table border :data="permissionArr" style="width: 100%" row-key="id">
      <el-table-column label="名称" prop="name"></el-table-column>
      <el-table-column label="权限值" prop="code"></el-table-column>
      <el-table-column label="修改时间" prop="updateTime"></el-table-column>
      <el-table-column label="操作">
        <template #="{ row }">
          <el-button type="primary" size="small" icon="Plus" :disabled="row.level === 4" @click="addPermission(row)">
            {{ row.level === 3 ? '添加功能' : '添加菜单' }}
          </el-button>
          <el-button type="warning" size="small" icon="Edit" :disabled="row.level === 1" @click="updatePermission(row)">编辑</el-button>

          <el-popconfirm :title="`是否确定删除该${row.name}吗？`" confirmButtonText="确定" cancelButtonText="取消" @confirm="deleteMenu(row)">
            <template #reference>
              <el-button type="danger" size="small" icon="Delete" :disabled="row.level === 1">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加, 编辑弹窗 -->
    <el-dialog :title="title" v-model="drawerVisible" width="30%">
      <template #default>
        <el-form label-width="70">
          <el-form-item label="菜单名称">
            <el-input placeholder="请输入菜单名称" v-model="menuData.name" />
          </el-form-item>

          <el-form-item label="权限值">
            <el-input placeholder="请输入权限值" v-model="menuData.code" />
          </el-form-item>
        </el-form>
      </template>

      <template #footer>
        <span>
          <el-button @click="drawerVisible = false">取消</el-button>
          <el-button type="primary" @click="save">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted, computed, reactive } from 'vue'
  import { reqAllPermisstion, reqAddOrUpdateMenu, reqRemoveMenu } from '@/api/acl/menu'
  import type { PermisstionResponseData, PermisstionList, Permisstion, MenuParams } from '@/api/acl/menu/type'
  import { getElMessage } from '@/utils/message'

  const permissionArr = ref<PermisstionList>([])
  const drawerVisible = ref<boolean>(false)
  const menuData = reactive<MenuParams>({
    code: '',
    level: 0,
    name: '',
    pid: 0,
  })
  const title = computed(() => (menuData.id ? '编辑菜单' : '添加菜单'))
  const loading = ref<boolean>(false)
  onMounted(() => {
    getHasMenu()
  })

  // 添加功能 添加菜单
  function addPermission(row: Permisstion) {
    Object.assign(menuData, {
      code: '',
      level: 0,
      name: '',
      pid: 0,
    })
    drawerVisible.value = true
    // 收集新增的菜单的level数值
    menuData.pid = row.id as number
    menuData.level = (row.level as number) + 1
  }

  // 点击编辑
  function updatePermission(row: Permisstion) {
    drawerVisible.value = true
    Object.assign(menuData, row)
  }

  // 点击删除
  async function deleteMenu(row: Permisstion) {
    try {
      const res: any = await reqRemoveMenu(row.id as number)
      if (res) {
        getElMessage('删除成功', 'success')
      } else {
        getElMessage('删除失败', 'error')
      }
    } catch (error) {
      getElMessage((error as Error).message, 'error')
    } finally {
      getHasMenu()
    }
  }

  async function save() {
    try {
      const res: any = await reqAddOrUpdateMenu(menuData)
      const isEdit = !!menuData.id
      if (res.code === 200) {
        getElMessage(isEdit ? '编辑成功' : '添加成功', 'success')
      } else {
        getElMessage(isEdit ? '编辑失败' : '添加失败', 'error')
      }
    } catch (error) {
      getElMessage((error as Error).message, 'error')
    } finally {
      drawerVisible.value = false
      getHasMenu()
    }
  }

  async function getHasMenu() {
    try {
      loading.value = true
      const res: PermisstionResponseData = await reqAllPermisstion()
      if (res.code === 200) {
        permissionArr.value = res.data
      } else {
        getElMessage('获取菜单列表失败', 'error')
      }
    } catch (error) {
      getElMessage((error as Error).message, 'error')
    } finally {
      loading.value = false
    }
  }
</script>

<style lang="scss" scoped></style>
